<template>
   <div class="beijing">
        <van-nav-bar
            style="background-color: #EDEDED;"
            left-arrow
            @click-left="onClickLeft"
            />
        <div class="i-xinxi" hover-class="i-xinxi2" :hover-stay-time="50">
            <img class="i-toxiang" :src="$store.state.getUserAdd.uimg" mode="aspectFit" />
            <p class="i-xinming">{{$store.state.getUserAdd.uname}}</p>
            <p class="i-Chats">Chats号：{{$store.state.getUserAdd.uaccount}}</p>
        </div>
        <ul style="margin-top: 180px;">
            <li style="width: 100%;background-color: #ffffff;height: 60px;" @click="AddUser">
                <p style="color: cornflowerblue;font-size: 20px;text-align: center;line-height: 60px;font-weight:bold;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">添加好友</p>
            </li>
        </ul>
   </div>
</template>

<script>


export default {
    name:'Addahomepage',
    methods:{
        AddUser(){
            const options = {
                method: 'GET',
                headers: {
                    "Content-Type": 'application/json'
                }
            }
            fetch(`http://8.130.95.37:8085/getFriend/${this.$store.state.getUserAdd.uid}/${this.$store.state.udate.uid}`, options).then(res => res.json()).then(res => {
                console.log(res[0]);
                if (res[0] == null) {
                    const options = {
                    method: 'GET',
                    headers: {
                        "Content-Type": 'application/json'
                    }
                    }
                    fetch(`http://8.130.95.37:8085/addFriend/${this.$store.state.getUserAdd.uid}/${this.$store.state.udate.uid}`, options).then(res => res.json()).then(res => {
                        console.log(res);
                        if(res == 1){
                            this.$message({
                                message: '好友添加成功！',
                                type: 'success'
                            });
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }else{
                    this.$message({
                        message: '对方已经是你的好友！',
                        type: 'success'
                    });
                }
            }).catch(err => {
                console.log(err)
            })
           
        },
        onClickLeft(){
            this.$router.go(-1)
        }
    }
    
}
</script>


<style scoped>
.beijing{
    position:fixed;
    background-color: #EDEDED;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}
.i-xinxi{
    width: 100%;
    background-color: #ffffff;
    float: left;
    height: 160px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.i-xinxi2{
    width: 100%;
    background-color: #707070;
    float: left;
    height: 160px;
}
page{
    background-color: #F8F8F8;
}
.i-toxiang{
    background-color: black;
    width: 80px;
    height: 80px;
    margin-top: 10%;
    margin-left: 10%;
    float: left;
    border-radius: 10px;
}
.i-xinming{
    font-size: 25px;
    margin-top: 9%;
    margin-left: 33%;
}
.i-Chats{
    color: #dbdbdb;
    font-size: 15px;
    margin-top: 8%;
    margin-left: 33%;
}

</style>
